<template>
  <!-- @closed="editing=false" 关闭屉式菜单  重置编辑状态为不编辑 -->
  <van-action-sheet
    :value="value"
    @closed="editing = false"
    @input="$emit('input', $event)"
    title="编辑频道"
  >
    <div class="channel">
      <div class="tit">
        我的频道：
        <span class="tip">点击可进入频道</span>
        <van-button
          v-if="!editing"
          @click="editing = true"
          size="mini"
          type="info"
          plain
          >编辑</van-button
        >
        <van-button
          v-else
          @click="editing = false"
          size="mini"
          type="danger"
          plain
          >完成</van-button
        >
      </div>
      <van-grid class="van-hairline--left">
        <!-- 渲染用户频道 -->
        <van-grid-item
          v-for="(item, userEditIndex) in userChannelList"
          :key="item.id"
        >
          <span
            class="f12"
            :class="{ red: userEditIndex === channelIdentifier }"
            @click="enterChannel(userEditIndex)"
            >{{ item.name }}</span
          >
          <!-- 删除按钮显示 让第一个默认不需要删除===>就不显示===>根据页签的索引判断给布尔值 -->
          <van-icon
            v-show="editing && userEditIndex != 0"
            class="btn"
            name="cross"
            @click="delUserChannel(item.id, userEditIndex)"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="channel">
      <!-- 渲染可选频道 -->
      <div class="tit">可选频道：</div>
      <van-grid class="van-hairline--left">
        <van-grid-item v-for="item in optionalChannel" :key="item.id">
          <span class="f12">{{ item.name }}</span>
          <van-icon
            class="btn"
            name="plus"
            @click="addUserChannel(item)"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
  </van-action-sheet>
</template>
<script>
import { getAllChannelApi, delUserChannelApi, addUserChannelApi } from '@/api/channelAPi.js'
export default {
  props: {
    // 打开/关闭的状态
    value: {
      type: Boolean,
      default: false
    },
    // 当前选个的页签的索引
    channelIdentifier: {
      type: Number,
      default: 0
    },
    userChannelList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      // 编辑状态
      editing: false,
      // 所有频道数据
      allChannelList: []
    }
  },
  methods: {
    // 可选频道 === 全部频道 - 用户以选定的频道 ===>同时要是可以变的 跟随用户的操作变化而变化===>计算
    async getAllChannel () {
      const { data } = await getAllChannelApi()
      this.allChannelList = data.channels
    },
    // 点击ActionSheet里面频道跳转到对应的频道模块
    enterChannel (userEditIndex) {
      // 发送给父组件 修改tabs里面的标识符identifier
      // this.$emit('enter-channel', userEditIndex)
      // 子传父新写法
      this.$emit('update:channelIdentifier', userEditIndex)
      // 关闭当前<van-action-sheet></van-action-sheet>组件
      this.$emit('input', false)
    },
    // 用户删除'我的频道' ===>1.硬删除:后端数据删除 2.软删除:前端视图删除
    async delUserChannel (id, index) {
      try {
        await delUserChannelApi(id)
        // 删除成功提示
        this.$toast.success('删除频道成功!')
        // 软删除(子传父===>局部删除复杂数据类型)
        this.userChannelList.splice(index, 1)
        // 当删除选中类名(高亮红色)之前的频道===>选中就会跳到后一个标签去 就会让原本选中的变为不选中===>如果当前删除的索引小于高亮标签索引就让channelIdentifier--
        if (index < this.channelIdentifier) {
          this.$emit('update:channelIdentifier', this.channelIdentifier - 1)
        }
      } catch (error) {
        //  删除失败
        console.dir(error)
        this.$toast.fail('删除失败')
      }
    },
    // 在可选频道中添加为用户频道
    async addUserChannel (newChannel) {
      // console.log(id)
      // 把用户频道的数组改变为 请求需要传参的所要求的的数组格式[{id:userid,seq:sequence索引序列}]
      const resetUserChannel = this.userChannelList.map((item, index) => {
        return { id: item.id, seq: index }
      })
      resetUserChannel.push({ id: newChannel.id, seq: resetUserChannel.length })
      // 删掉第一个推荐标签
      resetUserChannel.shift()
      // console.log(resetUserChannel)
      try {
        // 掉接口新增到用户频道
        await addUserChannelApi(resetUserChannel)
        // 成功提示
        this.$toast.success('新增成功')
        // 改变视图===>软增加===>子传父
        this.userChannelList.push(newChannel)
      } catch (error) {
        console.dir(error)
        this.$toast.fail('添加失败!')
      }
    }
  },
  created () {
    this.getAllChannel()
  },
  computed: {
    optionalChannel () {
      // 可选频道（计算属性） = 全部频道 - 我的频道
      // 减法逻辑：
      // 1. 先遍历全部频道，拿着当前遍历的频道的ID，去我的频道中查找有没有相同ID的频道
      // 2. 查到了相同的频道ID  排除不要
      // 3. 查询不到频道的ID  这就是可选频道  追加到新数组中即可
      // Array.filter() 根据原有的数组，进行遍历，根据条件（回调函数返回值true|false）追加选项到新数组中。
      return this.allChannelList.filter(allChannel => {
        // filter里的回调参数返回一个布尔值===>判断需要筛选的数据
        // findIndex在数组中查找对应值的索引 没找到的返回值为 -1
        // return this.userChannelList.findIndex(userChannel => allChannel.id === userChannel.id) === -1
        // 法二: ===>filter里的回调函数 如果返回的布尔值是一个false 则会过虑掉这个false成立的条件===>从而返回原数组的一个子集
        return !this.userChannelList.some(userChannel => userChannel.id === allChannel.id)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.van-popup--bottom {
  &.van-popup--round {
    border-radius: 0;
  }
}
.van-action-sheet {
  max-height: 100%;
  height: 100%;
  .van-action-sheet__header {
    background: #3296fa;
    color: #fff;
    .van-icon-close,
    .van-action-sheet__close {
      color: #fff;
    }
  }
}
.channel {
  padding: 10px;
  .tit {
    line-height: 3;
    text-align: left;
    .tip {
      font-size: 10px;
      color: #999;
    }
  }
  .van-button {
    float: right;
    margin-top: 7px;
  }
  .btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ddd;
    font-size: 12px;
    color: #fff;
  }
  .f12 {
    font-size: 12px;
    color: #555;
  }
  .red {
    color: red;
  }
}
</style>
